<template>
  <div class="main_box">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">模板名称:</label>
            <span>{{dataInfo.modelName}}</span>
          </li>
          <li>
            <label class="label">省市区:</label>
            <span>{{dataInfo.provinceName}}-{{dataInfo.cityName}}-{{dataInfo.areaName}}</span>
          </li>
          <li>
            <label class="label">是否默认模板:</label>
            <span>{{formatMainFlag(dataInfo.mainFlag)}}</span>
          </li>
          <li>
            <label class="label">备注:</label>
            <span>{{dataInfo.remark}}</span>
          </li>
          <li>
            <label class="label">创建人:</label>
            <span>{{dataInfo.createUserName}}</span>
          </li>
          <li>
            <label class="label">创建时间:</label>
            <span>{{dataInfo.createDate}}</span>
          </li>
          <li>
            <label class="label">海报模板:</label>
            <div class="poster-btn">
              <button v-if="dataInfo.hbModelUrl" @click="viewHsHb">预览模板</button>
              <button v-if="dataInfo.hbModelUrl" @click="downloadHsHb">下载模板</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/components/Map";
import NuclePriceApi from "@/api/sample/nuclePrice";

export default{
    data(){
        return {
          dataInfo: ""
        }
    },
    components:{
      Map
    },
    methods:{
      getData(){
        NuclePriceApi.getData({id:this.$route.query.id})
          .then(res => {
            this.dataInfo = res.data;
        })
      },
      formatDate(value){
        return this.$Utils.formatDate(value,'yyyy-MM-dd hh:mm:ss')
      },
      //拼团状态：(1.拼团中 2.已成团 3.已完成 4.已取消)
      formatMainFlag(cellValue) {
        if (cellValue == 1){
          return "是"
        }else {
          return "否"
        }
      },
      viewHsHb(){
        window.open(this.dataInfo.hbModelUrl,"_blank");
      },
      downloadHsHb(){
        let url = this.dataInfo.hbModelUrl
        if (url){
          let name = this.$Utils.getFileNameByUrl(url)
          this.$Utils.downloadByBlob(url,name)
        }else{
          this.$Utils.notifyWarn("未上传海报模板")
        }
      },
      returnList(){
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/sample/nuclePriceModelManagement'});
      }
    },
    mounted(){
      this.getData();
    }
}
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>

<style scoped>
  .poster-btn{
    padding-bottom: 10px;
  }
  .poster-btn button{
    width: 124px;
    height: 33px;
    border: solid 1px white;
    border-radius: 10px;
    font-size: 15px;
    color: white;
    margin: 0 5px;
    cursor:pointer;
  }
  .poster-btn button:nth-child(1){
    background: #409EFF;
  }
  .poster-btn button:nth-child(1):hover{
    background: #66B1FF;
  }
  .poster-btn button:nth-child(2){
    background: #FDF6EC;
    color: #E6A23C;
    border: solid 1px #E6A23C;
  }
  .poster-btn button:nth-child(2):hover{
    background: #E6A23C;
    color: white;
  }
  .poster-btn button:nth-child(3){
    background: #F0F9EB;
    color: #67C23A;
    border: solid 1px #67C23A;
  }
  .poster-btn button:nth-child(3):hover{
    background: #67C23A;
    color: white;
  }
</style>
